<template>
  <div class="monitor-page">
    <!-- 顶部三块：功率/电量、能源流量与成本产量、产线及工艺参数 -->
    <div class="top-row">
      <!-- 实时功率与电量 -->
      <div class="panel">
        <div class="panel-title">实时功率与电量</div>
        <div class="sub-grid">
          <div class="sub-item">
            <div class="sub-title">实时功率曲线</div>
            <div ref="powerRealtimeRef" class="chart-box"></div>
          </div>
          <div class="sub-item">
            <div class="sub-title">最大需量（kW）</div>
            <div ref="maxDemandRef" class="chart-box small"></div>
          </div>
          <div class="sub-item">
            <div class="sub-title">峰谷平电量分布</div>
            <div ref="peakValleyPieRef" class="chart-box small"></div>
          </div>
          <div class="sub-item">
            <div class="sub-title">功率因数（PF）</div>
            <div ref="powerFactorRef" class="chart-box"></div>
          </div>
        </div>
      </div>

      <!-- 能源流量、成本占比与炉料产量 -->
      <div class="panel energy-combined">
        
        <!-- 能源累计数据 -->
        <div class="stat-row">
          <div class="stat-row-line">
            <div class="stat-box" v-for="e in energyTotals.slice(0, 2)" :key="e.name">
              <span class="stat-label">{{ e.name }}</span>
              <span class="stat-value">{{ e.total.toLocaleString() }} {{ e.unit }}</span>
            </div>
          </div>
          <div class="stat-row-line">
            <div class="stat-box" v-for="e in energyTotals.slice(2, 4)" :key="e.name">
              <span class="stat-label">{{ e.name }}</span>
              <span class="stat-value">{{ e.total.toLocaleString() }} {{ e.unit }}</span>
            </div>
          </div>
        </div>
        
        <!-- 流量图表和成本占比 -->
        <div class="energy-charts-grid">
          <div class="energy-flow-section">
            <div class="sub-title">瞬时流量趋势</div>
            <div ref="energyFlowRef" class="chart-box medium"></div>
          </div>
          <div class="cost-production-section">
            <div class="cost-share-wrapper">
              <div class="sub-title">当日能源费用占比</div>
              <div ref="costShareRef" class="chart-box small"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 产线/班次与工艺参数 -->
      <div class="panel">
        <div class="panel-title">各产线/班次产量与关键工艺</div>
        <div class="production-card">
              <div class="metric-label">当日炉料总产量</div>
              <div class="metric-value">{{ dailyProduction }} 吨</div>
              <div class="metric-sub">目标 ≥ {{ productionTarget }} 吨</div>
            </div>
        <div class="grid-mini">
          <div class="mini" v-for="kpi in miniKpis" :key="kpi.label">
            <span class="mini-label">{{ kpi.label }}</span>
            <span class="mini-value">{{ kpi.value }}</span>
            <div class="mini-bar"><div :style="{ width: kpi.rate + '%' }"></div></div>
          </div>
        </div>
        <!-- 然后显示产线图表 -->
        <div class="sub-title" style="margin-top: 0.5rem;">各产线/班次产量趋势</div>
        <div ref="lineMetricsRef" class="chart-box large"></div>
      </div>
    </div>

    <!-- 中间宽幅：炉料从原料到成品的实物流动路径动画 -->
    <!-- <div class="panel flow-wide">
      <MaterialFlow2D class="flow-2d" />
    </div> -->

    <!-- 底部宽幅：单位电耗趋势与班次对比 -->
    <div class="panel bottom-wide">
      <div class="panel-title"></div>
      <div class="dual-grid">
        <div class="chart-section">
          <div class="sub-title">单位电耗趋势（kWh/t）</div>
          <div ref="unitEnergyTrendRef" class="chart-box"></div>
        </div>
        <div class="chart-section">
          <div class="sub-title">各班次产量与单耗对比</div>
          <div ref="shiftCompareRef" class="chart-box"></div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
import MaterialFlow2D from './MaterialFlow2D.vue'

export default {
  name: 'OperationMonitor',
  components: { MaterialFlow2D },
  setup() {
    // refs
    const powerRealtimeRef = ref(null)
    const maxDemandRef = ref(null)
    const peakValleyPieRef = ref(null)
    const powerFactorRef = ref(null)
    const energyFlowRef = ref(null)
    const costShareRef = ref(null)
    const lineMetricsRef = ref(null)
    const unitEnergyTrendRef = ref(null)
    const shiftCompareRef = ref(null)

    // charts
    let powerRealtimeChart, maxDemandChart, peakValleyPieChart, powerFactorChart
    let energyFlowChart, costShareChart, lineMetricsChart
    let unitEnergyTrendChart, shiftCompareChart

    // data
    const energyTotals = ref([
      { name: '工业用水', total: 1_280, unit: 'm³' },
      { name: '天然气', total: 9_600, unit: 'Nm³' },
      { name: '压缩空气', total: 7_240, unit: 'm³' },
      { name: '蒸汽', total: 540, unit: '吨' }
    ])
    const dailyProduction = ref(286)
    const productionTarget = ref(260)
    const miniKpis = ref([
      { label: '质量合格率', value: '98.2%', rate: 98.2 },
      { label: '窑炉温度', value: '1870 ℃', rate: 86 },
      { label: '电机电流', value: '120 A', rate: 72 },
      { label: '风机转速', value: '1600 rpm', rate: 64 },
      { label: '系统压力', value: '2.1 bar', rate: 52 }
    ])

    // timers
    let realtimeTimer, pfTimer, energyFlowTimer

    // helper
    const initWhenReady = (elRef, fn) => {
      let retries = 0
      const tryInit = () => {
        if (elRef.value && elRef.value.clientWidth > 0 && elRef.value.clientHeight > 0) {
          fn()
        } else if (retries < 20) {
          retries++
          setTimeout(tryInit, 120)
        } else {
          fn()
        }
      }
      tryInit()
    }

    // renderers
    const renderPowerRealtime = () => {
      if (!powerRealtimeChart) powerRealtimeChart = echarts.init(powerRealtimeRef.value)
      const x = Array.from({ length: 60 }, (_, i) => i - 59).map(i => `${i}s`)
      const base = 1800
      const seriesData = x.map(() => base + Math.round((Math.random() - 0.5) * 180))
      const option = {
        backgroundColor: 'transparent',
        grid: { left: 35, right: 20, top: 28, bottom: 24 },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: x, axisLabel: { color: '#9bd7ff' }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.35)' } }, axisTick: { show: false } },
        yAxis: { type: 'value', name: '功率(kW)', nameTextStyle: { color: '#9bd7ff' }, axisLabel: { color: '#9bd7ff' }, splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.12)', type: 'dashed' } } },
        series: [{
          type: 'line',
          name: '实时功率',
          smooth: true,
          symbol: 'none',
          lineStyle: { width: 2.5, color: '#4c9bfd' },
          areaStyle: { color: 'rgba(76,155,253,.15)' },
          data: seriesData
        }]
      }
      powerRealtimeChart.setOption(option)

      // 模拟实时更新
      if (realtimeTimer) clearInterval(realtimeTimer)
      realtimeTimer = setInterval(() => {
        seriesData.shift()
        const last = seriesData[seriesData.length - 1]
        const next = Math.max(1200, Math.min(2600, last + Math.round((Math.random() - 0.5) * 120)))
        seriesData.push(next)
        powerRealtimeChart.setOption({ series: [{ data: seriesData }] })
      }, 2000)
    }

    const renderMaxDemand = () => {
      if (!maxDemandChart) maxDemandChart = echarts.init(maxDemandRef.value)
      const value = 2480
      const option = {
        backgroundColor: 'transparent',
        series: [{
          type: 'gauge',
          startAngle: 210,
          endAngle: -30,
          radius: '90%',
          min: 0,
          max: 3000,
          axisLine: { lineStyle: { width: 10, color: [[0.5, '#4c9bfd'], [0.8, '#00f2f1'], [1, '#ed3f35']] } },
          pointer: { width: 4 },
          title: { show: false },
          detail: { valueAnimation: true, formatter: '{value} kW', color: '#cfe8ff', fontSize: 16 },
          data: [{ value }]
        }]
      }
      maxDemandChart.setOption(option)
    }

    const renderPeakValleyPie = () => {
      if (!peakValleyPieChart) peakValleyPieChart = echarts.init(peakValleyPieRef.value)
      const option = {
        backgroundColor: 'transparent',
        tooltip: { trigger: 'item', formatter: '{b}: {c} MWh ({d}%)' },
        series: [{
          type: 'pie',
          radius: ['40%', '65%'],
          label: { color: '#cfe8ff' },
          data: [
            { value: 620, name: '峰段' },
            { value: 980, name: '平段' },
            { value: 740, name: '谷段' }
          ],
          color: ['#ed3f35', '#4c9bfd', '#00f2f1']
        }]
      }
      peakValleyPieChart.setOption(option)
    }

    const renderPowerFactor = () => {
      if (!powerFactorChart) powerFactorChart = echarts.init(powerFactorRef.value)
      const x = Array.from({ length: 24 }, (_, i) => `${i}:00`)
      const data = x.map((_, i) => 0.92 + Math.sin(i / 4) * 0.04 + (Math.random() * 0.02))
      const option = {
        backgroundColor: 'transparent',
        grid: { left: 35, right: 20, top: 30, bottom: 26 },
        tooltip: { trigger: 'axis', valueFormatter: v => v.toFixed(3) },
        xAxis: { type: 'category', data: x, axisLabel: { color: '#cfe8ff' }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.35)' } }, axisTick: { show: false } },
        yAxis: { type: 'value', min: 0.85, max: 1.0, axisLabel: { color: '#cfe8ff' }, splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.12)', type: 'dashed' } } },
        series: [{
          type: 'line',
          name: '功率因数',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          itemStyle: { color: '#9fe6b8' },
          lineStyle: { width: 2.5, color: '#9fe6b8' },
          areaStyle: { color: 'rgba(159,230,184,.18)' },
          data
        }]
      }
      powerFactorChart.setOption(option)

      if (pfTimer) clearInterval(pfTimer)
      pfTimer = setInterval(() => {
        const newData = data.map(v => Math.max(0.86, Math.min(0.995, v + (Math.random() - 0.5) * 0.01)))
        powerFactorChart.setOption({ series: [{ data: newData }] })
      }, 8000)
    }

    const renderEnergyFlow = () => {
      if (!energyFlowChart) energyFlowChart = echarts.init(energyFlowRef.value)
      const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
      const gen = (base) => hours.map((_, i) => Math.round(base + Math.sin(i / 3) * base * 0.12 + Math.random() * base * 0.08))
      const seriesMap = {
        '工业用水(m³/h)': gen(60),
        '天然气(Nm³/h)': gen(520),
        '压缩空气(m³/h)': gen(380),
        '蒸汽(吨/h)': gen(22)
      }
      const option = {
        backgroundColor: 'transparent',
        grid: { left: 40, right: 20, top: 30, bottom: 30 },
        tooltip: { trigger: 'axis' },
        legend: { top: 4, textStyle: { color: '#cfe8ff', fontSize: 11 } },
        xAxis: { type: 'category', data: hours, axisLabel: { color: '#cfe8ff' }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.35)' } } },
        yAxis: { type: 'value', axisLabel: { color: '#cfe8ff' }, splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.12)', type: 'dashed' } } },
        series: Object.keys(seriesMap).map((name, idx) => ({
          name,
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: { width: 2, color: ['#4c9bfd', '#00f2f1', '#9fe6b8', '#ed3f35'][idx] },
          areaStyle: { color: ['rgba(76,155,253,.12)', 'rgba(0,242,241,.12)', 'rgba(159,230,184,.12)', 'rgba(237,63,53,.12)'][idx] },
          data: seriesMap[name]
        }))
      }
      energyFlowChart.setOption(option)

      // 累计值动态增加
      if (energyFlowTimer) clearInterval(energyFlowTimer)
      energyFlowTimer = setInterval(() => {
        energyTotals.value = energyTotals.value.map((e, i) => ({
          ...e,
          total: Math.round(e.total + (i === 3 ? 0.8 : 12 + Math.random() * 8))
        }))
      }, 6000)
    }

    const renderCostShare = () => {
      if (!costShareChart) costShareChart = echarts.init(costShareRef.value)
      const option = {
        backgroundColor: 'transparent',
        tooltip: { trigger: 'item', formatter: '{b}: {c} 千元 ({d}%)' },
        series: [{
          type: 'pie',
          radius: ['45%', '70%'],
          label: { color: '#cfe8ff' },
          data: [
            { value: 860, name: '电力' },
            { value: 240, name: '天然气' },
            { value: 160, name: '蒸汽' },
            { value: 110, name: '压缩空气' },
            { value: 60, name: '工业用水' }
          ],
          color: ['#4c9bfd', '#00f2f1', '#9fe6b8', '#ff9f7f', '#eacf19']
        }]
      }
      costShareChart.setOption(option)
    }

    const renderLineMetrics = () => {
      if (!lineMetricsChart) lineMetricsChart = echarts.init(lineMetricsRef.value)
      const hours = Array.from({ length: 12 }, (_, i) => `${i + 8}:00`)
      const lines = ['产线A', '产线B', '产线C', '产线D']
      const colors = ['#00f2f1', '#4c9bfd', '#9fe6b8', '#ed3f35']
      const series = lines.map((name, idx) => ({
        name,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: { color: colors[idx] },
        lineStyle: { width: 2.5, color: colors[idx] },
        areaStyle: { color: ['rgba(0,242,241,.12)','rgba(76,155,253,.12)','rgba(159,230,184,.12)','rgba(237,63,53,.12)'][idx] },
        data: hours.map(() => Math.round(12 + Math.random() * 6 + (idx * 2)))
      }))
      const option = {
        backgroundColor: 'transparent',
        legend: { top: 4,left:75, textStyle: { color: '#cfe8ff' } },
        grid: { left: 40, right: 20, top: 34, bottom: 28 },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: hours, axisLabel: { color: '#cfe8ff' }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.35)' } } },
        yAxis: { type: 'value', name: '产量(t/h)', nameTextStyle: { color: '#cfe8ff' }, axisLabel: { color: '#cfe8ff' }, splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.12)', type: 'dashed' } } },
        series
      }
      lineMetricsChart.setOption(option)
    }

    const renderUnitEnergyTrend = () => {
      if (!unitEnergyTrendChart) unitEnergyTrendChart = echarts.init(unitEnergyTrendRef.value)
      const days = Array.from({ length: 30 }, (_, i) => `${i + 1}`)
      const data = days.map((_, i) => 2460 + Math.round(Math.sin(i / 6) * 120 + (Math.random() * 80) - 40))
      const option = {
        backgroundColor: 'transparent',
        grid: { left: 40, right: 20, top: 20, bottom: 30 },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: days, axisLabel: { color: '#cfe8ff' }, axisLine: { lineStyle: { color: 'rgba(0,108,255,.35)' } } },
        yAxis: { type: 'value', axisLabel: { color: '#cfe8ff' }, splitLine: { show: true, lineStyle: { color: 'rgba(0,108,255,.12)', type: 'dashed' } } },
        series: [{ type: 'line', smooth: true, symbol: 'none', lineStyle: { width: 2.5, color: '#4c9bfd' }, areaStyle: { color: 'rgba(76,155,253,.12)' }, data }]
      }
      unitEnergyTrendChart.setOption(option)
    }

    const renderShiftCompare = () => {
      if (!shiftCompareChart) shiftCompareChart = echarts.init(shiftCompareRef.value)
      const shifts = ['白班', '中班', '夜班']
      const production = [98, 84, 102]
      const unitEnergy = [2420, 2500, 2380]
      const efficiency = [95.2, 87.6, 98.8] // 效率百分比
      
      const option = {
        backgroundColor: 'transparent',
        grid: { left: 50, right: 50, top: 60, bottom: 40 },
        tooltip: { 
          trigger: 'axis',
          backgroundColor: 'rgba(0,20,40,0.9)',
          borderColor: 'rgba(0,108,255,0.5)',
          textStyle: { color: '#cfe8ff' },
          formatter: function(params) {
            let result = `<div style="font-weight: bold; margin-bottom: 8px;">${params[0].axisValue}</div>`
            params.forEach(param => {
              const color = param.color
              const value = param.seriesName === '效率' ? param.value + '%' : 
                           param.seriesName === '产量' ? param.value + ' 吨' : 
                           param.value + ' kWh/t'
              result += `<div style="margin: 4px 0;">
                <span style="display: inline-block; width: 10px; height: 10px; background: ${color}; border-radius: 50%; margin-right: 8px;"></span>
                ${param.seriesName}: <span style="color: ${color}; font-weight: bold;">${value}</span>
              </div>`
            })
            return result
          }
        },
        legend: { 
          top: 8, 
          textStyle: { color: '#cfe8ff', fontSize: 12 },
          itemGap: 20,
          data: ['产量', '单耗', '效率']
        },
        xAxis: [{ 
          type: 'category', 
          data: shifts, 
          axisLabel: { 
            color: '#cfe8ff', 
            fontSize: 12,
            fontWeight: 'bold'
          }, 
          axisLine: { 
            lineStyle: { color: 'rgba(0,108,255,.4)', width: 2 } 
          },
          axisTick: { 
            show: true,
            lineStyle: { color: 'rgba(0,108,255,.4)' }
          }
        }],
        yAxis: [
          { 
            type: 'value', 
            name: '产量(吨)', 
            nameTextStyle: { color: '#4c9bfd', fontSize: 11, fontWeight: 'bold' }, 
            axisLabel: { color: '#4c9bfd', fontSize: 11 }, 
            splitLine: { show: false },
            axisLine: { 
              show: true,
              lineStyle: { color: 'rgba(76,155,253,.3)' }
            }
          },
          { 
            type: 'value', 
            name: '单耗(kWh/t)', 
            nameTextStyle: { color: '#ed3f35', fontSize: 11, fontWeight: 'bold' }, 
            axisLabel: { color: '#ed3f35', fontSize: 11 }, 
            splitLine: { 
              show: true, 
              lineStyle: { color: 'rgba(0,108,255,.08)', type: 'dashed' } 
            },
            axisLine: { 
              show: true,
              lineStyle: { color: 'rgba(237,63,53,.3)' }
            }
          },
          {
            type: 'value',
            name: '效率(%)',
            nameTextStyle: { color: '#00f2f1', fontSize: 11, fontWeight: 'bold' },
            axisLabel: { color: '#00f2f1', fontSize: 11 },
            splitLine: { show: false },
            axisLine: { 
              show: true,
              lineStyle: { color: 'rgba(0,242,241,.3)' }
            },
            min: 80,
            max: 100
          }
        ],
        series: [
          { 
            name: '产量', 
            type: 'bar', 
            data: production, 
            itemStyle: { 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#4c9bfd' },
                { offset: 1, color: 'rgba(76,155,253,0.6)' }
              ]),
              borderRadius: [4, 4, 0, 0],
              shadowColor: 'rgba(76,155,253,0.3)',
              shadowBlur: 8,
              shadowOffsetY: 2
            }, 
            barWidth: 25,
            label: {
              show: true,
              position: 'top',
              color: '#4c9bfd',
              fontSize: 11,
              fontWeight: 'bold',
              formatter: '{c}吨'
            }
          },
          { 
            name: '单耗', 
            type: 'line', 
            yAxisIndex: 1, 
            smooth: true, 
            symbol: 'circle', 
            symbolSize: 8, 
            itemStyle: { 
              color: '#ed3f35',
              shadowColor: 'rgba(237,63,53,0.4)',
              shadowBlur: 6
            }, 
            lineStyle: { 
              width: 3, 
              color: '#ed3f35',
              shadowColor: 'rgba(237,63,53,0.3)',
              shadowBlur: 8,
              shadowOffsetY: 2
            }, 
            data: unitEnergy,
            label: {
              show: true,
              position: 'top',
              color: '#ed3f35',
              fontSize: 10,
              formatter: '{c}'
            }
          },
          {
            name: '效率',
            type: 'line',
            yAxisIndex: 2,
            smooth: true,
            symbol: 'diamond',
            symbolSize: 10,
            itemStyle: {
              color: '#00f2f1',
              shadowColor: 'rgba(0,242,241,0.4)',
              shadowBlur: 6
            },
            lineStyle: {
              width: 3,
              color: '#00f2f1',
              type: 'dashed',
              shadowColor: 'rgba(0,242,241,0.3)',
              shadowBlur: 8,
              shadowOffsetY: 2
            },
            data: efficiency,
            label: {
              show: true,
              position: 'bottom',
              color: '#00f2f1',
              fontSize: 10,
              formatter: '{c}%'
            }
          }
        ]
      }
      shiftCompareChart.setOption(option)
    }

    onMounted(async () => {
      await nextTick()
      initWhenReady(powerRealtimeRef, renderPowerRealtime)
      initWhenReady(maxDemandRef, renderMaxDemand)
      initWhenReady(peakValleyPieRef, renderPeakValleyPie)
      initWhenReady(powerFactorRef, renderPowerFactor)
      initWhenReady(energyFlowRef, renderEnergyFlow)
      initWhenReady(costShareRef, renderCostShare)
      initWhenReady(lineMetricsRef, renderLineMetrics)
      initWhenReady(unitEnergyTrendRef, renderUnitEnergyTrend)
      initWhenReady(shiftCompareRef, renderShiftCompare)

      window.addEventListener('resize', () => {
        powerRealtimeChart && powerRealtimeChart.resize()
        maxDemandChart && maxDemandChart.resize()
        peakValleyPieChart && peakValleyPieChart.resize()
        powerFactorChart && powerFactorChart.resize()
        energyFlowChart && energyFlowChart.resize()
        costShareChart && costShareChart.resize()
        lineMetricsChart && lineMetricsChart.resize()
        unitEnergyTrendChart && unitEnergyTrendChart.resize()
        shiftCompareChart && shiftCompareChart.resize()
      })
    })

    onBeforeUnmount(() => {
      if (realtimeTimer) clearInterval(realtimeTimer)
      if (pfTimer) clearInterval(pfTimer)
      if (energyFlowTimer) clearInterval(energyFlowTimer)
    })

    return {
      powerRealtimeRef,
      maxDemandRef,
      peakValleyPieRef,
      powerFactorRef,
      energyFlowRef,
      costShareRef,
      lineMetricsRef,
      unitEnergyTrendRef,
      shiftCompareRef,
      energyTotals,
      dailyProduction,
      productionTarget,
      miniKpis
    }
  }
}
</script>

<style scoped>
.monitor-page { 
  display: grid; 
  grid-auto-rows: auto; 
  gap: 1rem; 
  height: 100vh; 
  padding: 1rem; 
  padding-right: .6rem; 
}

.top-row { 
  display: grid; 
  grid-template-columns: 1.2fr 1.2fr 1fr; 
  gap: 1rem; 
  min-height: 32rem;
  height: auto;
}

.panel { 
  border: 1px solid rgba(0,108,255,.25); 
  border-radius: 8px; 
  background: linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45)); 
  padding: .8rem; 
  backdrop-filter: blur(2px); 
  box-shadow: 0 6px 14px rgba(0,0,0,.25); 
  position: static; 
  display: flex; 
  flex-direction: column; 
  gap: .6rem; 
  height: auto;
  overflow: visible;
}

.panel::before, .panel::after { display: none; content: none; }

.panel-title { 
  font-size: .9rem; 
  color: #cfe8ff; 
  margin-bottom: .5rem; 
  letter-spacing: 1px; 
  line-height: 1.2;
}

.chart-box { 
  border-radius: 6px; 
  background: rgba(0,0,0,.25); 
  box-shadow: inset 0 0 30px rgba(0,108,255,.08); 
  min-height: 0;
}

.chart-box.small { height: 12rem; }
.chart-box.medium { height: 14rem; }
.chart-box.large { height: 15rem; }
.chart-box { height: 13rem; }

.sub-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: .6rem; 
  flex: 1;
  min-height: 26rem;
}

.sub-item { 
  display: flex; 
  flex-direction: column; 
  gap: .4rem; 
  min-height: 12rem;
}

.sub-title { 
  font-size: .75rem; 
  color: #9bd7ff; 
  margin-bottom: .2rem;
}

/* 能源组合面板样式 */
.energy-combined {
  min-height: 30rem;
}

.energy-title {
  font-size: .75rem !important;
  line-height: 1.3;
  word-break: break-all;
}

.stat-row { 
  display: flex;
  flex-direction: column;
  gap: .4rem; 
  margin-bottom: .5rem; 
}

.stat-row-line {
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: .4rem; 
}

.stat-box { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: .4rem .5rem; 
  border: 1px solid rgba(0,108,255,.25); 
  border-radius: 6px; 
  color: #cfe8ff; 
  background: linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45)); 
  font-size: .7rem;
}

.stat-label { 
  color: #4c9bfd; 
  font-size: .6rem;
}

.stat-value { 
  color: #00f2f1; 
  font-weight: bold; 
  font-size: .7rem;
}

.energy-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .8rem;
  flex: 1;
  min-height: 20rem;
}

.energy-flow-section {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 12rem;
}

.cost-production-section {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 18rem;
}

.cost-share-wrapper {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.production-card {
  border: 1px solid rgba(0,108,255,.25);
  border-radius: 8px;
  padding: .8rem;
  background: linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45));
  text-align: center;
}

.production-card .metric-label { 
  color: #cfe8ff; 
  font-size: .8rem; 
}

.production-card .metric-value { 
  color: #00f2f1; 
  font-size: 1.4rem; 
  font-weight: bold; 
  margin: .4rem 0; 
}

.production-card .metric-sub { 
  color: #9bd7ff; 
  font-size: .7rem; 
}

.grid-mini { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  gap: .5rem; 
  margin-bottom: .5rem; 
}

.mini { 
  border: 1px solid rgba(0,108,255,.25); 
  border-radius: 6px; 
  padding: .5rem; 
  background: linear-gradient(135deg, rgba(0,20,40,.35), rgba(0,5,15,.45)); 
  display: flex; 
  flex-direction: column; 
  gap: .25rem; 
}

.mini-label { 
  color: #cfe8ff; 
  font-size: .6rem; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-value { 
  color: #00f2f1; 
  font-size: .7rem; 
  font-weight: bold; 
  white-space: nowrap;
}

.mini-bar { 
  height: 8px; 
  background: rgba(0,108,255,.18); 
  border-radius: 6px; 
  overflow: hidden; 
}

.mini-bar > div { 
  height: 100%; 
  background: linear-gradient(90deg, #4c9bfd, #00f2f1); 
}

.flow-2d { 
  height: 10rem; 
}

.bottom-wide .chart-box { 
  height: 12rem; 
}

.dual-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: .8rem; 
  flex: 1;
  min-height: 0;
}

.chart-section {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 0;
}

/* 响应式设计 */
@media screen and (max-width: 1600px) {
  .top-row { 
    grid-template-columns: 1fr 1.4fr 1fr; 
  }
  .chart-box { height: 10rem; }
  .chart-box.small { height: 9rem; }
  .chart-box.medium { height: 10rem; }
  .chart-box.large { height: 11rem; }
  .flow-2d { height: 12rem; }
  .bottom-wide .chart-box { height: 10rem; }
}

@media screen and (max-width: 1400px) {
  .top-row { 
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto auto;
  }
  .energy-charts-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .dual-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .chart-box { height: 8.5rem; }
  .chart-box.small { height: 8rem; }
  .chart-box.medium { height: 8.5rem; }
  .chart-box.large { height: 9rem; }
  .flow-2d { height: 10rem; }
  .bottom-wide .chart-box { height: 9rem; }
  .grid-mini { 
    grid-template-columns: repeat(3, 1fr); 
  }
}

@media screen and (max-width: 1200px) {
  .sub-grid { 
    grid-template-columns: 1fr; 
  }
  .stat-row { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .grid-mini { 
    grid-template-columns: repeat(2, 1fr); 
  }
}
</style>